<!DOCTYPE html>
<html>
<head>
    <style>
      body {
        padding: 0;
        margin: 0;
      }
    </style>
    <script src="./tinymce/tinymce.min.js"></script>
    <script>
        tinymce.init({
            selector: 'textarea#full-featured',
            plugins: 'code print preview importcss searchreplace autolink autosave save directionality visualblocks visualchars fullscreen filemanager image link media template codesample table charmap hr pagebreak nonbreaking anchor toc insertdatetime advlist lists wordcount imagetools textpattern noneditable help charmap emoticons searchreplace',
            language:'zh_CN',
            //skin: "oxide-dark",
            mobile: {
                plugins: 'print preview importcss searchreplace autolink autosave save directionality visualblocks visualchars fullscreen filemanager image link media template codesample table charmap hr pagebreak nonbreaking anchor toc insertdatetime advlist lists wordcount textpattern noneditable help charmap quickbars emoticons searchreplace'
            },
            menu: {
                tc: {
                    title: 'TinyComments',
                    items: 'addcomment showcomments deleteallconversations'
                }
            },
            menubar: 'file edit view insert format tools table tc help',
            toolbar: 'code |undo redo | bold italic underline strikethrough | fontselect fontsizeselect formatselect | alignleft aligncenter alignright alignjustify | outdent indent |  numlist bullist | forecolor backcolor removeformat | pagebreak | charmap emoticons | fullscreen  preview save print | filemanager image media pageembed template link anchor codesample | visualblocks searchreplace',
            autosave_ask_before_unload: true,
            autosave_interval: "30s",
            autosave_prefix: "{path}{query}-{id}-",
            autosave_restore_when_empty: false,
            autosave_retention: "2m",

            convert_urls: false,
            extended_valid_elements: 'span',
            image_advtab: true,
            image_class_list: [
                { title: 'None', value: '' },
                { title: 'Some class', value: 'class-name' }
            ],
            importcss_append: true,
            templates: [
                { title: 'New Table', description: 'creates a new table', content: '<div class="mceTmpl"><table width="98%%"  border="0" cellspacing="0" cellpadding="0"><tr><th scope="col"> </th><th scope="col"> </th></tr><tr><td> </td><td> </td></tr></table></div>' },
                { title: 'Starting my story', description: 'A cure for writers block', content: 'Once upon a time...' },
                { title: 'New list with dates', description: 'New List with dates', content: '<div class="mceTmpl"><span class="cdate">cdate</span><br /><span class="mdate">mdate</span><h2>My List</h2><ul><li></li><li></li></ul></div>' }
            ],
            template_cdate_format: '[Date Created (CDATE): %m/%d/%Y : %H:%M:%S]',
            template_mdate_format: '[Date Modified (MDATE): %m/%d/%Y : %H:%M:%S]',
            height: window.innerHeight,
            image_caption: true,
            quickbars_selection_toolbar: 'bold italic | quicklink h2 h3 blockquote filemanager quicktable',
            noneditable_noneditable_class: "mceNonEditable",
            toolbar_mode: 'inline',
            spellchecker_dialog: true,
            spellchecker_whitelist: ['Ephox', 'Moxiecode'],
            content_style: ".mymention{ color: gray; }",
            contextmenu: "link bold copy filemanager image",
            a11y_advanced_options: true,
            draggable_modal: true,
            branding: false
        });

    </script>

</head>
<body>

<textarea id="full-featured">
  <!--<p style="text-align: center; font-size: 15px;">
    <img title="TinyMCE Logo" src="//www.tiny.cloud/images/glyph-tinymce@2x.png" alt="TinyMCE Logo" width="110" height="97" />
  </p>-->
</textarea>

</body>
</html>